<template>
  <div class="wrap">
    <div class="title">水平转动立方体（y轴）</div>
    <div class="cube">
      <div class="front">前</div>
      <div class="back">后</div>
      <div class="top">上</div>
      <div class="bottom">下</div>
      <div class="left">左</div>
      <div class="right">右</div>
    </div>
    <div class="square">
      <div class="squareItem"></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

<style scoped lang="less">
.wrap {
  width: 100%;
  height: 100vh;
  perspective: 800px;
  perspective-origin: 50% 100px;
}
.title {
  color: #333;
  font-size: 20px;
  text-align: center;
}
.cube {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  margin: 20px auto 0 ;
  div {
  position: absolute;
  width: 200px;
  height: 200px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
  background-color: #fff000;
}
.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
  background-color: #f000ff;
}
.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
  background-color: #0f0f0f;
}
.top {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
  background-color: #00ffff;
}
.bottom {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
  background-color: #0020f0;
}
.front {
  transform: translateZ(100px);
  background-color: #ff2300;
}
// 水平转动立方体
@keyframes spin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}
.cube {
  animation: spin 5s infinite linear;
}

.square {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  margin: 300px auto 0 ;
  div {
  position: absolute;
  width: 200px;
  height: 200px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}
}
.squareItem {
  background-color: #f000ff;
}
// 水平转动立方体
@keyframes squareRotate {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}
.square {
  animation: squareRotate 5s infinite linear;
}


</style>